import React from 'react';
import { Input } from 'antd';
import { FormItem } from './types';
import {
  Upload,
  Editor,
  RadioGroup,
  SelectGroup
} from '@/components';

const getPlaceholder = (item: FormItem) => {
  const { label, placeholder } = item;
  return label || placeholder;
}

const getStyle = (item: FormItem) => {
  const styles: any = {};
  const { width } = item;
  if (width) styles.width = `${width}px`;
  return styles;
}

export default {
  input: (item: FormItem) => {
    return (
      <Input
        maxLength={100}
        style={getStyle(item)}
        disabled={item.disabled}
        placeholder={getPlaceholder(item)}
      />
    );
  },
  select: (item: FormItem) => {
    return (
      <SelectGroup
        group={item.group}
        style={getStyle(item)}
        disabled={item.disabled}
        placeholder={getPlaceholder(item)}
      />
    )
  },
  upload: (item: FormItem) => {
    const {
      max,
      regExp,
      maxUpload,
      regMessage
    } = item.upload || {};
    return (
      <Upload
        maxSize={max}
        regExp={regExp}
        maxUpload={maxUpload}
        regMessage={regMessage}
        disabled={item.disabled}
      />
    )
  },
  textArea: (item: FormItem) => {
    return (
      <Input.TextArea
        rows={8}
        style={getStyle(item)}
        disabled={item.disabled}
        placeholder={getPlaceholder(item)}
      />
    )
  },
  editor: (item: FormItem) => {
    return (
      <Editor />
    )
  },
  radio: (item: FormItem) => {
    return (
      <RadioGroup
        group={item.group}
        disabled={item.disabled}
      />
    )
  }
}
